<template>
	<view class="popup">
		<view class="title">
			{{title}}
			<image src="../../static/cha.png" mode="aspectFill" @click="onClose"></image>
		</view>
		<scroll-view class="item-content" :scroll-y="true">
			<view v-for="(item, index) in lists" :key="item.id" class="item" @click="onChange(item, index)">
				<image :src="active == index ? '../../static/icon1_act.png' : '../../static/icon1.png'" mode="aspectFill"></image>
				<text v-if="!item.isInput">{{item.name}}</text>
				<view class="ipt-box" v-else>
					<text>自定义时间</text>
					<input type="number" value="1" @input="handleIpt" />
					<text>分钟</text>
				</view>
			</view>
		</scroll-view>
		
		<view class="btn">
			<btn text="确 定" @onBtnClick="onBtnClick"></btn>
		</view>
	</view>
</template>

<script>
	import btn from '../btn/index.vue';
	export default{
		components: {
			btn
		},
		props: {
			title: String,
			lists: Array,
			popInputShow: Boolean
		},
		data() {
			return {
				active: 0,
				time: 60000
			}
		},
		methods: {
			onClose() {
				this.$parent.close()
			},
			onChange(item, index) {
				this.active = index
				this.$emit('onChange', item)
			},
			handleIpt(e) {
				this.time = e.detail.value * 60000
			},
			onBtnClick() {
				this.$parent.close()
				this.$emit('onSumbit', this.active, this.time)
			}
		}
	}
</script>

<style scoped>
	.popup{
		width: 600rpx;
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
	}
	.title{
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		background: #3791E9;
		position: relative;
		font-size: 28rpx;
	}
	.title image{
		position: absolute;
		top: 28rpx;
		right: 24rpx;
		width: 24rpx;
		height: 24rpx;
	}
	.item-content{
		max-height: 700rpx;
		overflow-y: auto;
	}
	.item{
		height: 76rpx;
		display: flex;
		align-items: center;
		padding-left: 48rpx;
		border-top: 1px solid #E8E8E9;
		font-size: 26rpx;
	}
	.item image{
		width: 32rpx;
		height: 32rpx;
		margin-right: 32rpx;
	}
	.btn{
		border-top: 1px solid #E8E8E9;
		padding: 24rpx 0;
	}
	.ipt-box{
		border-top: 1px solid #E8E8E9;
		height: 76rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}
	.ipt-box input{
		width: 110rpx;
		text-align: center;
		border-bottom: 1px solid #AEB9C5;
	}
</style>
